import React, { Component } from 'react'
import HeaderBar from 'components/headerbar/HeaderBar'
import './Category.style.scss'
import Search from 'components/search/Search'
import { Route, withRouter, Redirect, Switch } from 'react-router-dom'
import Classfy from './conponents/Classfy'
import Material from './conponents/Material'
import { get } from 'api/http'
class Category extends Component {
    constructor() {
        super();
        this.state = {
            // 方向
            dir: 'left',
            classfy: [],
            material: []
        }
    }
    // 点击事件(分类和食材的切换)
    handleClick(dir) {
        this.setState({
            dir
        })
        // console.log(this.props);
        if (dir === 'left') {
            this.props.history.push('/home/category/classfy')
        } else {
            this.props.history.push('/home/category/material')
        }

    }
    render() {
        return (
            <div>
                <HeaderBar>
                    <div className="categoryBar">
                        <ul className={this.state.dir}>
                            <li className={this.state.dir === 'left' ? 'active' : ''}
                                onClick={() => this.handleClick('left')}
                            >分类
                            </li>
                            <li
                                className={this.state.dir === 'right' ? 'active' : ''}
                                onClick={() => this.handleClick('right')}
                            >食材</li>
                        </ul>
                    </div>

                </HeaderBar>
                <Search placeholder="想吃什么搜这里，如排骨"
                    inputBg='#efefef'
                    bg='#ffffff'></Search>

                <div>
                    <Switch>
                        <Route path="/home/category/classfy">
                            <Classfy list={this.state.classfy}></Classfy>
                        </Route>

                        <Route path="/home/category/material">
                            <Material list={this.state.material}></Material>
                        </Route>

                        <Redirect exact from="/home/category" to="/home/category/classfy"></Redirect>
                    </Switch>
                </div>
            </div>
        )
    }
    async componentDidMount() {
        let rs = await get('/api/category');
        this.setState({
            classfy: rs.data.data.category,
            material: rs.data.data.material
        })
            // console.log(rs);
    }
}
export default withRouter(Category)
// withRouter高阶组件 作用：对Category增强路由上下文的信息